// @ts-ignore
import { PageContainer } from '@ant-design/pro-components';
// @ts-ignore
import {Button, Card, Image, Input, Space, Tag} from 'antd';
// @ts-ignore
import {React, useState, useEffect} from 'react';
import {useParams} from "react-router";
import {getBookById, getBookCommendById} from "@/services/ant-design-pro/api";
import BorrowBox from "./Component/BorrowBox"
import CommentBox from "./Component/CommentBox"
import CommentForm from "./Component/CommentForm"

const BookDetail: React.FC = () => {
  const { bookId } = useParams()
  const [bookDetail, setBookDetail] = useState<API.BookDetail>({})
  const getBookDetail = async (id:string) => {
    try {
      const res = await getBookById(id);
      if (res.data) {
        setBookDetail(res);
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    if(bookId){
      getBookDetail(bookId).then();
    }
  }, []);

  const book = bookDetail.data

  // @ts-ignore
  const [bookCommentList, setBookCommentList] = useState<API.BookComment>({})

  const getBookCommentList = async (id:number) => {
    try {
      const res = await getBookCommendById(id);
      if (res.data) {
        console.log(res)
        setBookCommentList(res);
      }
    } catch (error) {
      console.log(error);
    }
  }
  useEffect(() => {
    if(book){
      getBookCommentList(book.id).then()
    }
  }, [book]);

  return(
    <PageContainer>
      {book && (
        <Card
          title={book.name}
        >
          <div
            className={"pictureBox"}
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              overflow: "hidden",
              width: "100%",
            }}
          >
            <Image
              src={book.picture}
              style={{
                height: "500px",
              }}
            ></Image>
          </div>

          <div
            className={"bookBox"}
            style={{
              float: "left"
            }}
          >
            <div
              className={"infoBox"}
              style={{
                padding: "20px",
                overflow: "hidden"
              }}
            >
              <div
                style={{
                  float: "left"
                }}
              >
                <h1>{book.name}</h1> <br/>
                <Tag color="magenta">编号：{book.id}</Tag>
                <Tag color="green">分类：{book.sort}</Tag>
                <Tag color="gold">智库评分：{book.score}</Tag>
                <h3>作者：{book.author}</h3>
                <h3>藏书地点：{book.location}</h3>
                <h3>现有余量：{book.num}</h3>
              </div>


              <div
                className={"buttonBox"}
                style={{
                  float: "right",
                  marginTop: "100px"
                }}
              >
                <BorrowBox book={bookDetail} />
              </div>
            </div>


            <div
              className={"introduction"}
              style={{
                backgroundColor: "#f5fdf3",
                padding: "20px",
                borderRadius: "20px",
                border: "1px #549159 solid",
                color: "#549159",
                fontSize: "15px",
              }}
            >
              介绍：{book.introduction}
            </div>
          </div>

          <div
            className={"buttonBox"}
            style={{
              float: "right",
              marginTop: "20px"
            }}
          >
          </div>
        </Card>
      )}

      <Card
        style={{
          padding: "0px",
          marginTop: "10px",
          marginBottom: "10px",
        }}
      >
         <CommentForm book={bookDetail}/>
      </Card>

      <CommentBox bookCommentList={bookCommentList}/>
    </PageContainer>
  )
};
export default BookDetail;
